<template>
  <div>
    <div class="com-top-nav">
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        title="任务详情"
      />
    </div>
    <div class="task-detail-container">
      <div class="task-info-container">
        <div class="task-info">
          <div>
            <p class="task-name">{{this.dataList.task.name}}</p>
            <p class="task-type"><span>{{this.dataList.task.sour}}</span></p>
          </div>
          <p class="task-money">{{this.dataList.task.showprice}}</p>
        </div>
        <div class="task-time-container">
          <p class="task-time">报名截止时间：<span>{{this.dataList.task.cut_time}}</span></p>
          <p class="sign-count"></p>
        </div>
      </div>
      <zx-card title="任务描述">
        <div slot="zx-content" class="task-description">
          {{this.dataList.task.describe}}
        </div>
      </zx-card>
      <zx-card title="任务周期">
        <div slot="zx-content" class="task-description">
          {{this.dataList.task.time}}
        </div>
      </zx-card>
      <zx-card title="参考素材">
        <div slot="zx-content" class="task-reference">
          <!--<img class="previewer-task-img" v-for="(item, index) in list" :src="item.src" width="100"-->
          <!--@click="show(index)">-->
          <!--<div v-transfer-dom>-->
          <!--<previewer :list="list" ref="previewer" :options="options"-->
          <!--@on-index-change="logIndexChange"></previewer>-->
          <!--</div>-->
          <zx-img-preview :imgList="imgList"></zx-img-preview>
        </div>
      </zx-card>
      <zx-card title="企业信息">
        <div slot="zx-content" class="task-company-info">
          <img v-if="this.dataList.task.type==='企业'" :src="this.dataList.company.avatar" alt="">
          <img v-else :src="this.dataList.company.headimgurl" alt="">
          <div class="personal-info-n">
            <p class="">{{this.dataList.company.name?this.dataList.company.name:this.dataList.company.nickname}}</p>
            <p class="sign">{{this.dataList.company.description}}</p>
          </div>
        </div>
      </zx-card>
      <!--<div class="button-container">-->
      <!--<x-button type="primary">报名</x-button>-->
      <!--</div>-->
      <div class="button">
        <van-button type="primary" size="large" @click="onClickEnroll">报名</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import zxCard from "../../components/zx-card";
import zxImgPreview from "../../components/zx-img-preview";
import { Button, NavBar } from "vant";

Vue.use(NavBar);
export default {
  components: {
    Button,
    zxCard,
    NavBar,
    zxImgPreview
  },
  data() {
    return {
      dataList: [],
      imgList: ["https://img.yzcdn.cn/2.jpg", "https://img.yzcdn.cn/2.jpg"]
    };
  },
  mounted() {},
  created() {
    this.init();
  },
  methods: {
    onClickLeft() {
      this.$router.history.go(-1);
    },
    init(){
      this.axios
      .get("/api/detail_task", {
        params: {
          uid: this.$route.query.uid,
          taskid: this.$route.query.id,
          type: this.$route.query.sour
        }
      })
      .then(res => {
        this.dataList = res.data.data;
        this.imgList[0] = this.dataList.task.img_url1;
        this.imgList[1] = this.dataList.task.img_url2;
        //console.log(res.data.data);
      });
    },
    onClickEnroll(){
      let uid = JSON.parse(sessionStorage.getItem("user")).uid;
      let uid2=this.dataList.task.uid;
      if(uid ==uid2){
        this.$toast({message: `不能报名自己发布的任务哦~`, position: 'middle'});
        return;
      };
      this.axios
      .get("/api/task_enrol", {
        params: {
          uid: JSON.parse(sessionStorage.getItem("user")).uid,
          taskid: this.$route.query.id,
        }
      })
      .then(res => {
        if(res.data.err_code === 0){
          this.$toast({message: `报名成功`, position: 'middle'});
        }
        else{
          this.$toast({message: res.data.data, position: 'middle'});
        }
      });
    }
  }
};
</script>

<style scoped lang="less" type="text/less">
@import url("../../../static/style/bottom-person-nav.less");
@import url("../../../static/style/var");

.button {
  padding: 15px 10px;
}

.task-detail-container {
  .task-info-container {
    padding: 10px 10px 0 10px;
    background-color: #ffffff;
    margin-bottom: 10px;
    font-size: 14px;
    .task-info {
      display: flex;
      flex: 1;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 10px;
      div {
        flex: 1;
        .task-name {
          line-height: 2;
          font-size: 16px; /*px*/
        }
        .task-type {
          span {
            display: inline-block;
            padding: 2px 5px;
            border-radius: 2px;
            font-size: 12px; /*px*/
            background-color: #bad9ba;
          }
        }
      }
      .task-money {
        //display: flex;
        width: 50px;
        text-align: right;
        font-size: 16px; /*px*/
        color: #1aad19;
      }
    }
    .task-time-container {
      display: flex;
      padding: 5px 0;
      color: #505050;
      font-size: @weak-tips-size;
      .task-time {
        flex: 1;
        span {
          color: #de6348;
        }
      }
      .sign-count {
        width: 100px;
        text-align: right;
      }
    }
  }
  .task-description {
    font-size: 14px;
    padding: 5px 10px;
    color: #808080;
  }
  .task-period {
    padding: 5px 10px;
    color: #808080;
  }
  .task-reference {
    padding: 5px 10px;
    color: #808080;
    .previewer-task-img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
  }
  .task-company-info {
    padding: 5px 10px;
    color: #808080;
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
    }
    .personal-info-n {
      flex: 1;
      padding-left: 12px;
      .name {
        width: 100%;
      }
      .sign {
        width: 100%;
      }
    }
  }
}
</style>
